<script lang="ts" setup>
import { onMounted, ref, onActivated, watch } from 'vue'
import { useDialogStore } from '../store/dialog'
const input = ref('')
const dialogStore = useDialogStore()
const centerDialogVisible = ref(false)
function handleClose() {
    centerDialogVisible.value = false
    dialogStore.changeDescription(input.value)
    console.log(dialogStore.contain.description)
}
// 监听对话框显示/隐藏
watch(centerDialogVisible, (isOpen) => {
    if (isOpen) {
        input.value = dialogStore.contain.description||'' // 打开时初始化
    } else {
        input.value = dialogStore.contain.description||'' // 关闭时重置
    }
})
onMounted(() => {
    input.value = dialogStore.contain.description||''
})
</script>
<template>
    <el-button type="primary" plain @click="centerDialogVisible = true">
        点我修改藏品详情
    </el-button>
    <el-dialog v-model="centerDialogVisible" title="修改藏品详情" width="800px" align-center class="description-dialog">
        <div class="dialog-content">
            <div class="header">
                <h3 class="title">藏品详细描述</h3>
                <el-text type="info" class="tip">最多可输入2000个字符</el-text>
            </div>

            <el-input v-model="input" type="textarea" :rows="8" resize="vertical" placeholder="请输入详细描述信息"
                class="description-input" :autosize="{ minRows: 6, maxRows: 12 }" show-word-limit maxlength="2000" />

            <div>

                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false" size="large">
                        取消修改
                    </el-button>
                    <el-button type="primary" @click="handleClose" size="large" class="submit-btn">
                        确认修改
                    </el-button>
                </div>

            </div>
        </div>
    </el-dialog>
</template>
<style scoped>
.dialog-content {
    padding: 0 20px;
}

.header {
    margin-bottom: 24px;
}

.title {
    font-size: 16px;
    color: #303133;
    margin: 0 0 8px 0;
}

.tip {
    font-size: 12px;
}

.description-input {
    width: 100%;
    margin-bottom: 24px;

    :deep(.el-textarea__inner) {
        font-size: 14px;
        line-height: 1.6;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:focus {
            border-color: #409eff;
            box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
        }
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.submit-btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .description-dialog {
        width: 90% !important;

        .el-dialog__body {
            padding: 20px 15px;
        }
    }

    .dialog-footer {
        flex-direction: column;

        .el-button {
            width: 100%;
        }
    }
}
</style>
<!--
<template>
    <el-button type="primary" plain @click="centerDialogVisible = true">
        点我修改藏品详情
    </el-button>
    <el-dialog v-model="centerDialogVisible" title="修改藏品详情" width="800" align-center>
        <span>商品详情</span>
        <el-input v-model="input" style="width: 240px;" placeholder="Please input" clearable />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleClose(input)">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
-->
